<template>
	<view class="wallet bg-white  hv100  clearfix ">
		<cu-custom bgColor="bg-white" isBack >
			<block slot="content">评价</block>
		</cu-custom>
		<view class="flex al-strar px15 ">
			<image :src="pic" class="block140" mode=""></image>
			<view class="flex flex-direction goods-title">
				<view class="ellipsis3  wp100 mt10">{{title}}</view>
				<view class="flex align-center mt30">
					<!--好评-->
					<image src="/static/goods/haoping.png" class="block20 mr10" v-if="pingfen>0" mode="" @click="pingfen=1"></image>
					<image src="/static/goods/haoping.png" class="block20 mr10" v-if="pingfen>1" mode="" @click="pingfen=2"></image>
					<image src="/static/goods/haoping.png" class="block20 mr10" v-if="pingfen>2" mode="" @click="pingfen=3"></image>
					<image src="/static/goods/haoping.png" class="block20 mr10" v-if="pingfen>3" mode="" @click="pingfen=4"></image>
					<image src="/static/goods/haoping.png" class="block20 mr10" v-if="pingfen>4" mode="" @click="pingfen=5"></image>
					<!--差评-->
					<image src="/static/goods/chaping.png" class="block20 mr10" v-if="pingfen<1" mode="" @click="pingfen=1"></image>
					<image src="/static/goods/chaping.png" class="block20 mr10" v-if="pingfen<2" mode="" @click="pingfen=2"></image>
					<image src="/static/goods/chaping.png" class="block20 mr10" v-if="pingfen<3" mode="" @click="pingfen=3"></image>
					<image src="/static/goods/chaping.png" class="block20 mr10" v-if="pingfen<4" mode="" @click="pingfen=4"></image>
					<image src="/static/goods/chaping.png" class="block20 mr10" v-if="pingfen<5" mode="" @click="pingfen=5"></image>
				</view>
			</view>
		</view>
		<view class="bg-shuru mt20 radius-5">
			<textarea v-model="pingjiatext" placeholder="请输入您对产品的评论" class="f14 pt15 px15 lh16" />
		</view>
		<view class="flex align-center px15 mt20"  @click="updateAvatar">
			<view class="discenter flex-direction block100 shadow-warp" v-if="tempFilePath==''">
				<image src="/static/goods/photo.png" class="block6355"></image>
				<view class="mt10 f12 text-info">照片</view>
			</view>
			<image :src="tempFilePath" mode="" class="block100" v-else></image>
		</view>
		<view class="button-pingjia f16 mt40 discenter" @click="surepingjia">提交</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import uploadFile from '@/mixins/uploadFile'
export default {
	mixins: [uploadFile],
	data() {
		return {
			id:'',
			tempFilePath: '',
			title:'',
			orderId:'',
			pingfen:5,
			pingjiatext:'',
			pingjiapic:'',
			pic:''
		}
	},
	onLoad(e) {
		this.id=e.goodsid
		this.pic=e.pic
		this.title=e.name
		this.orderId=e.orderid
		//this.getData()
	},

	methods: {
		...mapActions(['setUpdate']),
		async updateAvatar() {
			this.HideModal()
			let [err, res] = await uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
			})
			if (res) {
				// #ifdef H5
				this.tempFilePath = res.tempFilePaths.shift()
				//this.surepingjia()
				// #endif
				// #ifndef H5
				this.tempFilePath = res.tempFilePaths.shift()
				//this.surepingjia()
				// #endif
			}
		},
		confirm(e) {
			this.tempFilePath = ''
			//this.surepingjia()
		},
		cancel() {
			this.tempFilePath = ''
		},
		async surepingjia() {
			if(this.pingjiatext==''){
				uni.showToast({
					title:'请填写评论',
					icon:'none'
				})
				return false
			}
			if (this.tempFilePath) {
				let {
					data: { updateToken, updateUrl, prefixUrl }
				} = await this.$http.post('user.getQnToken', {}, { tipConfig: { storeLoading: true } })
				let img = await this.qnUploadFile({ url: updateUrl, prefixUrl, files: this.tempFilePath, formData: { token: updateToken } })
				this.pingjiapic = img[0]
			}
			let formData={
				orderList:this.orderId,
				goodsId:this.id,
				star:this.pingfen,
				desc:this.pingjiatext,
				pic:this.pingjiapic
			}
			await this.$http.post('order.pingjiapage', formData, { tipConfig: { storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1 } })
			this.setUpdate(true)
		},
	}
}
</script>

<style>
page{
	background-color: #FFFFFF !important;
}
.button-pingjia{
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	height: 92rpx;
	color: #FFFFFF;
	border-radius: 40rpx;
	background-image: linear-gradient(to right, #FF8463, #FE4725) !important;
}
.block140{
	width: 240rpx !important;
	height: 240rpx !important;
}
.goods-title{
	width: calc(100% - 300rpx);
	margin-left:30rpx;
}
.bg-shuru{
	background-color: #f0f4f5;
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
}
.block100{
	width: 200rpx;
	height: 200rpx;
}
.block6355{
	width: 63rpx;
	height: 55rpx;
}
</style>
